/**
 * 测肤结果自定义分数产品关联表单
 * @author Zeon scplay@gmail.com
 * @date 2019/3/29
 * @copyright Created by Panxsoft.
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .v-admin-hair-create {
        width: 700px;
        min-height: 600px;

        .product_thumb {
          width: 50px;
          vertical-align: middle;
        }
    }
</style>
<template>
	<Row
		class="v-admin-hair-create"
		type="flex"
		justify="start">
		<i-col push="2">
			<Form
				ref="formValidate"
				:model="formValidate"
				:rules="ruleValidate"
				:label-width="140"
				class="form">

				<!-- 选择检测仪 -->
				<!-- <Form-item
					:label="$t('test_product_label.select_detector')"
					required
					prop="skin_detector_id"
				>
					<Select
						v-model="formValidate.skin_detector_id"
						:placeholder="$t('common.please_select',{'field':$t('test_product_label.select_detector')})"
						filterable
						transfer>
						<Option
							v-for="skin_detector in skin_detectors"
							:value="skin_detector.id"
							:key="`skin_detector_select[${skin_detector.id}]`">{{ skin_detector.name }}</Option>
					</Select>
				</Form-item> -->


				<!-- hm 需要选择身体部位 -->
				<!-- <Form-item

					:label="$t('product.body_positions')"
					required

				>:placeholder="$t('common.please_select',{'field':$t('product.body_positions')})" -->
				<!-- <Select
						v-model="formValidate.position_id"
						placeholder="请选择身体部分"
						filterable
						transfer>
						<Option
							v-for="position in hm_positions"
							:value="position.position_id"
							:key="`skin_hm_pos_select[${position.position_id}]`">{{ position.position_name }}</Option>
					</Select>
				</Form-item> -->

				<!-- 检测项目 -->
				<Form-item

					:label="$t('test_product_label.select_skin')"
					required

				>
					<Select
						v-model="formValidate.item_id"
						:placeholder="$t('common.please_select',{'field':$t('test_product_label.select_skin')})"
						filterable
						size="large"
						transfer>
						<Option
							v-for="item in hm_positions"
							:value="item.item_id"
							:key="`skin_item_select[${item.item_id}]`">{{ item.item_name }}</Option>
					</Select>
				</Form-item>

				<Form-item

					:label="$t('custom_recommend_value.please_select')"
					required
					prop="item_id"
				>
					<Select
						v-if="hm_positions[formValidate.item_id-1]"
						v-model="formValidate.level_sort"
						placeholder="请选择"
						filterable
						size="large"
						transfer>
						<Option
							v-for="score in hm_positions[formValidate.item_id-1].suggest_by_item_id"
							:value="score.customer_relate_wax_skin.level_sort"
							:key="`skin_hm_pos_select[${score.id}]`">{{ score.level_name }}</Option>
					</Select>

					<Select
						v-else
						v-model="formValidate.level_sort"

						filterable
						size="large"
						transfer>
						<Option
							:value="5"
						/>
					</Select>
				</Form-item>


				<!-- 选商品 -->
				<Form-item
					:label="$t('custom_recommend_value.goods')"
					required

				>
					<!-- prop="product_ids" -->
					<Select
						v-model="formValidate.product_ids"
						name="create__recommend_product_id"
						multiple
						filterable
						size="large"
					>
						<Option
							v-for="product in products"
							:value="product.id"
							:key="'recommend_relate_product' + product.id"
							:label="product.name"
							style="height:65px"
						>
							<img
								:src="product.thumb_url"
								class="product_thumb">
							<span style="line-height:35px">{{ product.name }}</span>
							<span>{{ product.title }}</span>
						</Option>
					</Select>
				</Form-item>

				<!-- 提交 / 重置 -->
				<Form-item>
					<Button
						type="primary"
						@click="handleSubmit('formValidate')">
						{{ this.$t('common.submit') }}
					</Button>
					<Button
						type="ghost"
						style="margin-left: 8px"
						@click="handleReset('formValidate')">
						{{ this.$t('common.reset') }}
					</Button>
				</Form-item>

			</Form>
		</i-col>
	</Row>
</template>

<script>

import labelWidthMixin from 'src/views/mixins/labelWidthMixin';

export default {

	name: 'CustomRecommendValueCreate',

	mixins: [labelWidthMixin],

	props: {
		products: {
			type: Array,
			required: true,
		},
		hm_positions: {
      	type: Array,
			required: true,
		},
	},

	data() {
		return {


			formValidate: { // 表单数据

				item_id: 1,
				level_sort: '',
				product_ids: [],
			},

			ruleValidate: { // 验证规则

			},
		};
	},


	methods: {
		/**
     * 提交表单
     * @param  {string} name {表单的ref}
     * @return {undefined}
     */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					// this.$emit('post', this.formDataCreate());
					this.formDataCreate();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
     * 重置表单
     * @param  {string} name {表单的ref}
     * @return {undefined}
     */
		handleReset(name) {
			this.$refs[name].resetFields();


			this.formValidate.item_id = 1;
			this.formValidate.level_sort = '';
			this.formValidate.product_ids = [];
		},

		/**
     * 手动拼接表单数据
     * @return {Object} {拼接好的表单数据}
     */
		formDataCreate() {
			const OBJ = {
				skin_type: 'CustomerRelateWaxSkin',
				wax_skin: {

					item_id: this.formValidate.item_id,
					level_sort: this.formValidate.level_sort,
				},
				products: this.formValidate.product_ids,
			};
			console.log(OBJ);
			 this.$emit('store', OBJ);
		},
	},
};
</script>
